<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont" @click="toHome">&#xe611;</span>
    </div>
    <div class="header-title">
      城市选择
    </div>
    <div class="header-address">
      <div class="header-in">境内</div>
      <div class="header-out">境外·港澳台</div>
    </div>

  </div>
</template>

<script>
  export default {
    methods:{
      toHome(){
        this.$router.push("/")
      }
    }
  }
</script>

<style scoped lang="stylus">

  @import "~css/var.styl"

  .header{
    width: 100%;
    line-height: .58rem;
    background: $bgColor;
    color: #ffffff;
    font-size: .32rem;
    position:relative;
  }
  .header-left{
    width: .4rem;
    padding:.1rem .2rem;
    text-align: center;
    font-weight: bold;
    position:absolute;
  }
  .header-title{
    text-align:center;
    padding:.1rem .2rem;
  }
  .header-address{
    display:flex;
    padding:.2rem 1rem;
    height: .4rem;
    line-height: .4rem;
  }
  .header-in{
    width:100%;
    text-align:center;
    background-color:#fff;
    color:#00afc7;
    font-size: .28rem;
    margin:0;
  }
  .header-out{
    width:100%;
    text-align: center;
    background-color:#00afc7;
    color:#fff;
    font-size: .28rem;
    border:1px solid #fff;
  }
</style>
